<template>
  <div class="item" style="height: 100%; width: 100%" ref="container">
    <div id="UnitBar" :style="{ width: width + 'px', height: height - 40 + 'px' }"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import request from "@/utils/request.js";

export default {
  props: {
    width: Number,
    height: Number
  },
  name: "UnitBar",
  data() {
    return {
      chartInstance: null,
      echart: echarts,
      resizeTimer: null, // 定时器
      chartData: []
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
      this.getCount();
      window.addEventListener("resize", this.handleResizeEnd);
    });
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.handleResizeEnd);
  },
  methods: {
    getCount() {
      let level = JSON.parse(localStorage.getItem("user")).level;
      let organizationId = JSON.parse(localStorage.getItem("user")).organization;
      let isAllClient = JSON.parse(localStorage.getItem("user")).isAllClient;
      let clientIds;
      if (isAllClient === "1") {
        clientIds = JSON.parse(localStorage.getItem("user")).clientIds;
      } else {
        clientIds = [];
      }
      request.get(`/equipment-input-store/findCountByClientAndOnline?organizationId=${organizationId}&level=${level}&isAllClient=${isAllClient}&clientIds=${clientIds}`).then((res) => {
        // 假设返回的数据是符合格式的
        this.chartData = res.data;
        console.log(this.chartData)
        this.updateData(); // 更新图表数据
      });
    },
    initChart() {
      const container = document.getElementById("UnitBar");

      // 通过判断容器宽高来确保容器尺寸正常
      if (!container || container.offsetWidth === 0 || container.offsetHeight === 0) {
        console.error("图表容器的宽高为零，无法初始化 ECharts 实例");
        return;
      }

      this.chartInstance = this.echart.init(container);
      this.updateData(); // 在初始化时调用更新数据
    },
    updateData() {
      const groupedData = {};
      this.chartData.forEach(item => {
        if (!groupedData[item.clientId]) {
          groupedData[item.clientId] = { clientName: item.clientName, online: 0, unline: 0 };
        }
        if (item.online === "online") {
          groupedData[item.clientId].online += item.value;
        } else if (item.online === "unline") {
          groupedData[item.clientId].unline += item.value;
        }
      });

      const categories = Object.values(groupedData).map(item => item.clientName);
      const onlineData = Object.values(groupedData).map(item => item.online);
      const unlineData = Object.values(groupedData).map(item => item.unline);

      const option = {
        tooltip: {
          axisPointer: {
            type: "line", // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）
            snap: false, // 坐标轴指示器是否自动吸附到点上。默认自动判断。
          },
          showContent: true, // 是否显示提示框浮层，默认显示
          triggerOn: "mousemove", // 提示框触发的条件（'mousemove'，鼠标移动时触发；'click'，鼠标点击时触发；'mousemove|click'，同时鼠标移动和点击时触发；'none'，不在 'mousemove' 或 'click' 时触发）
          confine: true, // 是否将 tooltip 框限制在图表的区域内
          backgroundColor: "#ffffff", // 提示框浮层的背景颜色
          padding: 15, // 提示框浮层内边距，单位px
          position: "top",
          textStyle: {
            color: "#000000", // 文字的颜色
            fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
            fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
          },
        },
        legend: {
          data: ["在线", "离线"],
          textStyle: {
            color: "#2CC2EF" // 图例文字颜色
          }
        },
        xAxis: {
          type: "category",
          data: categories,
          axisLabel: {
            show: false,
            interval: 0,
            formatter: value => value.match(/.{1,8}/g).join("\n"), // 换行显示
            color: "#2CC2EF"
          }
        },
        yAxis: {
          type: "value",
          minInterval: 1,
          splitLine: {
            lineStyle: {
              type: 'dashed', // 虚线样式
              color: 'rgba(255, 255, 255, 0)' // 虚线颜色
            }

          },//去除网格线
          axisLabel: {
            interval: 0,
            color: "#2CC2EF"
          }
        },
        series: [
          {
            name: "在线",
            type: "bar",
            data: onlineData,
            itemStyle: { color: "rgb(12,199,22)" }
          },
          {
            name: "离线",
            type: "bar",
            data: unlineData,
            itemStyle: { color: "rgb(245,9,9)" }
          }
        ],
        // dataZoom: [
        //   {
        //     xAxisIndex: [0],
        //     start: 0,
        //     end: 100,
        //     bottom: 2,
        //   }
        // ]
      };
      this.chartInstance.setOption(option);
    },
    handleResizeEnd() {
      clearTimeout(this.resizeTimer);
      this.resizeTimer = setTimeout(() => {
        this.chartInstance.resize();
        this.updateData(); // 重新渲染 echarts 图表
      }, 500); // 延迟更新图表
    },
  }
};
</script>
